<template>
<div class="content">
    <div class="form-box">
        <div class="form">
            <h1 style="font-size:calc(100vh * 0.03);line-height:calc(100vh * 0.03);">登录页</h1>
            <el-form ref="form" :rules="rules" :model="form" label-width="calc(100vw * 0.03)">
            <div>
                <el-input size="mini"  prop="username" placeholder="请输入用户名" v-model="form.username"  prefix-icon="el-icon-user"></el-input>
            </div>
            <div>
                <el-input size="mini" prop="password" placeholder="请输入密码" @keyup.enter.native="Submit('form')" v-model="form.password" show-password prefix-icon="el-icon-lock"></el-input>
            </div>	  
            <div class="form-bottom">
                    <el-checkbox v-model="checked" @change="oRemember">记住密码</el-checkbox>
                    <el-button @click="toRegister" style="color:#000;" type="text">没有账号?去注册</el-button>
            </div>
            <el-button class="login" @click="Submit('form')">登录</el-button>
            </el-form>
        </div>
    </div>
</div>
</template>
  
<script>
import Cookies from 'js-cookie'
import {loginUser} from "@/api/user"
    export default{
        data(){
            return{
                form: {
                    username:"",
                    password:""
                },
                checked:false,
                rules:{
                // username
                username:[
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                }
            }
        },
        created(){
            
            if ( this.getCookie( 'user' ) && this.getCookie( 'pswd' )){
                this.form.username = this.getCookie( 'user' );
                this.form.password = this.getCookie( 'pswd' );
                // this.checked = true ;
            }
        },
        methods:{
            Submit(formName) {
                if (this.checked){
                    this.setCookie( 'user' ,this.form.username,7); //保存帐号到cookie，有效期7天
                    this.setCookie( 'pswd' ,this.form.password,7); //保存密码到cookie，有效期7天
                }else{
                    this.delCookie("user")
                    this.delCookie("pswd")
                }
                if(!this.form.username){
                   this.$message("请输入用户名")
                   return;
                }
                if(!this.form.password){
                    this.$message("请输入密码")
                    return;
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        loginUser(this.form).then(res=>{
                            if(Cookies.get("tooken")){
                                Cookies.remove("tooken")
                            }
                            if (res.status==0) {
                                let {token,tokenTime,uid,isAdmin} = res;
                                localStorage.setItem("uid",uid)
                                this.$store.commit("setIsAdmin",isAdmin==1);
                                var during = tokenTime[0]*3600*1000;
                                let expires = new Date(new Date() * 1 + during);
                                Cookies.set("tooken",token,{expires:expires})
                                this.$router.push("/")
                            }else{
                                Cookies.remove("tooken");
                                this.$message.error("密码错误，退出所有账号")
                            }
                        })
                    }
                });
            },
            go(e){
                // console.log(e);
            },
            oRemember(){

            },
            setCookie(name,value,day){
                var date = new Date();
                date.setDate(date.getDate() + day);
                document.cookie = name + '=' + value + ';expires=' + date;
            },
            getCookie(name){
                var reg = RegExp(name+ '=([^;]+)' );
                var arr = document.cookie.match(reg);
                if (arr){
                return arr[1];
                } else {
                return '' ;
                }
            },
            delCookie(name){
                this.setCookie(name, null ,-1);
            },
            toRegister(){
                this.$router.push("register")
            }
        }
    }
</script>

<style type="text/css" scoped lang="scss">
    .content{
        width: 100%;
        height: calc(100vh);
        background: url(../assets/login-bg.png) no-repeat;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        a{
        text-decoration: none;
        }
        .form-box{
            width:calc(100vw * 0.72);
            height: calc(100vh * 0.8);
            background-color: #fff;
            border-radius: calc(100vh * 0.08);
            position: relative;
            background: url(../assets/login-bg1.png) no-repeat #fff;
            background-size: 100% calc(100vh * 0.8);
            h1{
                font-size: calc(100vh );
                color: #3d7eff;
            }
            .form{
                width: 40%;
                height: 100%;
                display: flex;
                position: absolute;
                flex-direction: column;
                justify-content: center;
                right: 0%;
                .el-form{
                    width: 60%;
                    margin-top: 8%;
                    .el-input{
                        margin: 14px 0;
                        height: calc(100vh * 0.06);
                        width: calc(100vw * 0.2);
                    }
                    ::v-deep .el-checkbox__inner{
                        border: 1px solid #5579ff;
                    }
                    ::v-deep .el-input__inner{
                        height: 55px;
                        border-radius: 32px;
                        height: calc(100vh * 0.06);
                        background-color: #f6f7fb;
                    }
                    .el-checkbox{
                        color: #5579ff;
                    }
                    .el-checkbox__inner{
                        border: 1px solid #5579ff;
                    }
                    .login{
                        height: calc(100vh * 0.06);
                        width: calc(100vw * 0.2);
                        border-radius: calc(100vh * 0.03);
                        background-color: #5579ff;
                        margin-top: 20px;
                    }
                    .form-bottom{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin: 12px 0;
                        a{
                            color: #5b78ff;
                            font-size: 15px;
                        }
                    }
                    .login{
                        color: #fff;
                    }
                }
            }
        }
    }
    
</style>